<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i> 数据统计
                </el-breadcrumb-item>
                <el-breadcrumb-item>饼状图</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <span style="display: inline-block; margin-right: 10px;">请选择时间范围: </span>
                <el-date-picker
                        v-model="dd"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        @change="dateChange">
                </el-date-picker>
            </div>
            <schart v-if="showPie" style="padding-top: 30px" ref="bar" class="schart" canvasId="bar" :options="options" :key="updateKey"></schart>
            <el-empty v-else :image-size="200" description="所选时间范围暂无数据"></el-empty>
        </div>
    </div>
</template>

<script>
import Schart from "vue-schart";
import {reactive, ref, toRaw} from "vue";
import {dateConvert, getCategoryWeight, gToKg} from '../../api'
export default {
    name: "pieData",
    components: { Schart },
    setup() {
        const updateKey = ref(0);
        const query = reactive({
            beginTime: dateConvert(new Date(), true),
            endTime: dateConvert(new Date(), false)
        });
        const dd = ref([
            new Date(),
            new Date()
        ]);
        const showPie = ref(true);
        const options = {
            type: "pie",
            title: {
                text: "所选时间范围内各类废品回收的重量(Kg)",
            },
            xRorate: 25,
            labels: ['金属', '废纸', '塑料'],
            datasets: [
                {
                    data: [0, 1, 2]
                }
            ],
        };

        const fetchBaseData = () => {
            getCategoryWeight(query).then(res => {
                let tag = false;
                options.labels = res.data.map(e => {
                    return e.categoryName;
                });
                options.datasets[0].data = res.data.map(e => {
                    if (e.weight !== 0) tag = true;
                    return gToKg(e.weight);
                });
                showPie.value = tag;
                updateKey.value = updateKey.value + 1;
            })
        };
        fetchBaseData();

        const dateChange = (e) => {
            const res = toRaw(e);
            let date1 = new Date(res[0]);
            let date2 = new Date(res[1]);
            query.beginTime = dateConvert(date1, true);
            query.endTime = dateConvert(date2, false);
            fetchBaseData();
        };

        return {
            options,
            updateKey,
            query,
            dd,
            showPie,
            dateChange
        };
    },
};
</script>

<style scoped>
.el-row {
    margin-bottom: 20px;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 100px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 70px;
}

.member span {
    display: inline-block;
    padding-top: 8px;
    padding-bottom: 8px;
}
.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}

.schart {
    width: 100%;
    height: 300px;
}
</style>
